<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 创建页面结构 -->
        <router-link to="/">首页</router-link>
        <router-link to="/product">产品详情</router-link>
        <!-- 页面渲染出口 -->
        <router-view></router-view>
    </div>
</body>
<!-- 导入依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    //定义组件
    const Home = {
        template:`
            <div>首页</div>
        `
    }
    //方式一
    // const Product = {
    //     template:`
    //         <div>产品详情</div>
    //     `
    // }
    //方式二
    /* 
    修改Product 组件的引入方式
    const Product = ()=> import("./Product.js")
    懒加载
     */
    const Product=()=>Promise.resolve({template:`<div>产品详情增强版</div>`});
    
    //创建组件和路由的关联
    const routes = [
        {
            path:"/",
            component:Home
        },
        {
            path:"/product",
            component:Product
        }
    ]
    //交给跟路由
    let router = new VueRouter({
        routes,
    })

    //创建实例
    let vm = new Vue({
        router,
        el:"#app"
    })
</script>
</html>